<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>限时抢购活动</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
    <link rel="stylesheet" href="styles.css" />
    <style>
      /* 基础样式 */
      body {
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        line-height: 1.6;
        color: #333;
        background-color: #f8f9fa;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1rem;
      }

      /* 头部样式 */
      .header {
        background: linear-gradient(135deg, #ff6f61, #ff4757);
        color: white;
        padding: 2rem;
        text-align: center;
        border-radius: 8px;
        margin-bottom: 2rem;
      }

      .header h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
      }

      .header p {
        font-size: 1.2rem;
        opacity: 0.9;
      }

      /* 倒计时样式 */
      .countdown {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin: 2rem 0;
      }

      .countdown-item {
        background: white;
        padding: 1rem;
        border-radius: 8px;
        text-align: center;
        min-width: 80px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .countdown-number {
        font-size: 2rem;
        font-weight: bold;
        color: #ff4757;
      }

      .countdown-label {
        font-size: 0.9rem;
        color: #666;
      }

      /* 产品展示 */
      .products {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        margin: 2rem 0;
      }

      .product-card {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
      }

      .product-card:hover {
        transform: translateY(-5px);
      }

      .product-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
      }

      .product-info {
        padding: 1rem;
      }

      .product-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
      }

      .product-price {
        color: #ff4757;
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 1rem;
      }

      .product-original-price {
        text-decoration: line-through;
        color: #999;
        margin-left: 0.5rem;
      }

      .product-button {
        display: block;
        width: 100%;
        padding: 0.8rem;
        background: #ff4757;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.3s ease;
      }

      .product-button:hover {
        background: #ff6f61;
      }

      /* 表单样式 */
      .subscribe-form {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        margin: 2rem 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .form-group {
        margin-bottom: 1rem;
      }

      .form-group label {
        display: block;
        margin-bottom: 0.5rem;
      }

      .form-group input {
        width: 100%;
        padding: 0.8rem;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      .form-button {
        width: 100%;
        padding: 0.8rem;
        background: #ff4757;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.3s ease;
      }

      .form-button:hover {
        background: #ff6f61;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 头部 -->
      <div class="header">
        <h1>限时抢购活动</h1>
        <p>精选商品，低至5折，数量有限，先到先得！</p>
      </div>

      <!-- 倒计时 -->
      <div class="countdown">
        <div class="countdown-item">
          <div class="countdown-number" id="hours">00</div>
          <div class="countdown-label">小时</div>
        </div>
        <div class="countdown-item">
          <div class="countdown-number" id="minutes">00</div>
          <div class="countdown-label">分钟</div>
        </div>
        <div class="countdown-item">
          <div class="countdown-number" id="seconds">00</div>
          <div class="countdown-label">秒</div>
        </div>
      </div>

      <!-- 产品展示 -->
      <div class="products">
        <div class="product-card">
          <img src="https://picsum.photos/400/300?random=1" alt="产品1" class="product-image" />
          <div class="product-info">
            <h3 class="product-title">时尚智能手表</h3>
            <div class="product-price">
              ¥599
              <span class="product-original-price">¥999</span>
            </div>
            <button class="product-button">立即抢购</button>
          </div>
        </div>
        <!-- <div class="product-card">
          <img src="https://picsum.photos/400/300?random=2" alt="产品2" class="product-image" />
          <div class="product-info">
            <h3 class="product-title">无线降噪耳机</h3>
            <div class="product-price">
              ¥399
              <span class="product-original-price">¥599</span>
            </div>
            <button class="product-button">立即抢购</button>
          </div>
        </div>
        <div class="product-card">
          <img src="https://picsum.photos/400/300?random=3" alt="产品3" class="product-image" />
          <div class="product-info">
            <h3 class="product-title">便携式投影仪</h3>
            <div class="product-price">
              ¥1299
              <span class="product-original-price">¥1999</span>
            </div>
            <button class="product-button">立即抢购</button>
          </div>
        </div> -->
      </div>

      <!-- 订阅表单 -->
      <div class="subscribe-form">
        <h2>订阅最新优惠</h2>
        <form id="subscribe-form">
          <div class="form-group">
            <label for="email">邮箱地址</label>
            <input type="email" id="email" placeholder="请输入您的邮箱" required />
          </div>
          <button type="submit" class="form-button">立即订阅</button>
        </form>
      </div>
    </div>

    <script src="../../dist/domrecord.umd.min.js"></script>
    <script>
      // 倒计时逻辑
      const endTime = new Date().getTime() + 24 * 60 * 60 * 1000; // 24小时后结束

      function updateCountdown() {
        const now = new Date().getTime();
        const timeLeft = endTime - now;

        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

        document.getElementById('hours').textContent = String(hours).padStart(2, '0');
        document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
        document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');

        if (timeLeft < 0) {
          clearInterval(countdownInterval);
          document.querySelector('.countdown').innerHTML = '<p>活动已结束</p>';
        }
      }

      const countdownInterval = setInterval(updateCountdown, 1000);
      updateCountdown();

      // 表单提交
      document.getElementById('subscribe-form').addEventListener('submit', function (e) {
        e.preventDefault();
        const email = document.getElementById('email').value;
        alert(`感谢订阅！我们将发送最新优惠到 ${email}`);
      });

      // 捕获 DOM
      function capture() {
        const snapshot = domrecord.snapshot();
        console.log(snapshot);
        alert('页面状态已捕获！');
      }

      // 为所有立即抢购按钮添加点击事件
      document.querySelectorAll('.product-button').forEach((button) => {
        button.addEventListener('click', function (e) {
          e.preventDefault();
          capture();
          // alert('商品已加入购物车！');
        });
      });
    </script>
  </body>
</html>
